<div id="login" class="modal-content rounded-4 shadow">

    <div class="modal-header p-5 pb-4 border-bottom-0">
        <h1 class="fw-bold mb-0 fs-2">Sign up</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>

    <div class="modal-body p-5 pt-0">

        <div class="form-floating mb-3">
            <input type="email"
                   v-model="email"
                   class="form-control rounded-3"
                   id="floatingInput"
                   placeholder="name@example.com"/>
            <label for="floatingInput">Email address</label>
        </div>

        <div class="form-floating mb-3">
            <input type="password"
                   v-model="password"
                   class="form-control rounded-3"
                   id="floatingPassword"
                   placeholder="Password">
            <label for="floatingPassword">Password</label>
        </div>

        <div v-if="registr" class="form-floating mb-3">
            <input type="password"
                   v-model="passwordConfirm"
                   class="form-control rounded-3"
                   id="ConfirmPassword"
                   placeholder="Repeat password">
            <label for="floatingPassword">Confirm Password</label>
        </div>

        <button class="w-100 mb-2 btn btn-lg rounded-3 btn-primary"
                @click="sendAuth()"
                type="submit"
        >{{ buttonText }}</button>
        <small @click="registration()" style="cursor: pointer;" >{{ logInText }}</small>
        <br>
        <small class="text-body-secondary">By clicking Sign up, you agree to the terms of use.</small>

    </div>

</div>
<script>
    var Vue = Vue.createApp({
        data() {
            return {
                registr : false,
                logInText : "Registration",
                buttonText: "Sign Up",
                email : "",
                password : "",
                passwordConfirm: ""
            }
        },
        mounted() {
            console.log("This project work at Vue.js 3 CDN and Node.js")
            test()
        },
        methods: {
            sendAuth () {
                if (this.registr === false) {
                    sendAuth(this.email, this.password)
                        .then(res => {

                        })
                        .cath(error => {

                        })
                } else {
                    sendRegistrInfo(this.email, this.password, this.passwordConfirm)
                        .then(res => {

                        })
                        .cath(error => {

                        })
                }
            },
            registration () {
                this.registr = !this.registr;
                if (this.registr !== false) {
                    this.logInText = "Or sign in";
                    this.buttonText = "Registration"
                } else {
                    this.logInText = "Registration";
                    this.buttonText = "Sign Up"
                }
            }
        },
    }).mount('#login');
</script>
